<template>
	<view>
		<view class="title">
			抽赏
		</view>
		<!-- tab栏切换 -->
		<view class="index">
			<view class="header">
				<p v-for="(item, index) in headList" :key="index" @click="changeTab(index)"
					:class="{ active: activeTab === index }">{{ item }}</p>
			</view>
			<view v-if="activeTab === 0">
				<view class="item-container">
					<view class="left-content">
						<!-- 首页镂空图片（死的） -->
					<!-- 	<image src="../../static/manghe/0342ea6c318837463b9d21d4877cc95d.png" mode=""
							style="width: 300rpx;height: 320rpx;"></image> -->
					</view>
					<view class="right-content">
						<view class="status">

						</view>
						<view class="title1">标题</view>
						<view class="bottom" style="display: inline-block;">
							<view class="immide">
								<view class="left">

									<view class="price-c">
										<PriceDisplay>价格</PriceDisplay>
									</view>
								</view>
								<!-- <image src="../../static/manghe/b7f8498be7d2ad7eea9c33b0de1bd08c.gif" mode=""></image> -->
							</view>
							<view class="small">
								<view v-for="(icon, iconIndex) in iconList" :key="iconIndex">
									<image :src="icon" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="activeTab === 1">
				<view class="item-container">
					<view class="left-content">
						<!-- 首页镂空图片（死的） -->
					<!-- 	<image src="../../static/manghe/0342ea6c318837463b9d21d4877cc95d.png" mode=""
							style="width: 300rpx;height: 320rpx;"></image> -->
					</view>
					<view class="right-content">
						<view class="status">

						</view>
						<view class="title1">标题222</view>
						<view class="bottom" style="display: inline-block;">
							<view class="immide">
								<view class="left">

									<view class="price-c">
										<PriceDisplay>价格</PriceDisplay>
									</view>
								</view>
								<!-- <image src="../../static/manghe/b7f8498be7d2ad7eea9c33b0de1bd08c.gif" mode=""></image> -->
							</view>
							<view class="small">
								<view v-for="(icon, iconIndex) in iconList" :key="iconIndex">
									<image :src="icon" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="activeTab === 2">
				<view class="item-container">
					<view class="left-content">
						<!-- 首页镂空图片（死的） -->
					<!-- 	<image src="../../static/manghe/0342ea6c318837463b9d21d4877cc95d.png" mode=""
							style="width: 300rpx;height: 320rpx;"></image> -->
					</view>
					<view class="right-content">
						<view class="status">

						</view>
						<view class="title1">标题333</view>
						<view class="bottom" style="display: inline-block;">
							<view class="immide">
								<view class="left">

									<view class="price-c">
										<PriceDisplay>价格</PriceDisplay>
									</view>
								</view>
								<!-- <image src="../../static/manghe/b7f8498be7d2ad7eea9c33b0de1bd08c.gif" mode=""></image> -->
							</view>
							<view class="small">
								<view v-for="(icon, iconIndex) in iconList" :key="iconIndex">
									<image :src="icon" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="activeTab === 3">
				<view class="item-container">
					<view class="left-content">
						<!-- 首页镂空图片（死的） -->
					<!-- 	<image src="../../static/manghe/0342ea6c318837463b9d21d4877cc95d.png" mode=""
							style="width: 300rpx;height: 320rpx;"></image> -->
					</view>
					<view class="right-content">
						<view class="status">

						</view>
						<view class="title1">标题44</view>
						<view class="bottom" style="display: inline-block;">
							<view class="immide">
								<view class="left">

									<view class="price-c">
										<PriceDisplay>价格</PriceDisplay>
									</view>
								</view>
								<!-- <image src="../../static/manghe/b7f8498be7d2ad7eea9c33b0de1bd08c.gif" mode=""></image> -->
							</view>
							<view class="small">
								<view v-for="(icon, iconIndex) in iconList" :key="iconIndex">
									<image :src="icon" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {boxAll} from "@/api/blind.js"
export default {
	data() {
		return {
			activeTab: 0,
			headList: ["一元夺宝", "个人赏", "无限赏", "一番赏"],
			iconList: [
				"../../static/manghe/3f7a0a34ad109d6d91bd364cf526055f.png",
				"../../static/manghe/3f7a0a34ad109d6d91bd364cf526055f.png",
				"../../static/manghe/3f7a0a34ad109d6d91bd364cf526055f.png",
				"../../static/manghe/3f7a0a34ad109d6d91bd364cf526055f.png",
				"../../static/manghe/3f7a0a34ad109d6d91bd364cf526055f.png",
				"../../static/manghe/3f7a0a34ad109d6d91bd364cf526055f.png"
			],
		};
	},
	methods: {
		changeTab(index) {
			this.activeTab = index;
			if (this.activeTab === 2) {
				console.log("Navigating to other page...");
				boxAll().then(res=>{
					uni.navigateTo({
					url: '../blind/index/details/details',
					success: function () {
						console.log("Navigation success");
					},
					fail: function (error) {
						console.error("Navigation failed", error);
					}
				});
				})
				
			}
		}
	},
}
</script>

<style lang="scss" scoped>
.title {
	width: 90%;
	/* height: 80rpx; */
	font-size: 50rpx;
	margin-left: 50rpx;
	text-align: center;
	margin-top: 30rpx;
	background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	/* color: white; */
	font-weight: 500;
	letter-spacing: 10rpx;
}

.header {
	margin-top: 30rpx;
	display: flex;
	width: 100%;
	justify-content: space-around;
	box-sizing: border-box;
	padding: 0 10rpx;

	p {
		border: 3rpx solid #565656;
		box-sizing: border-box;
		color: #565656;
		width: 150rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-weight: 100;
		font-size: 30rpx;
		text-align: center;
		border-radius: 5rpx;
		background-image: -webkit-linear-gradient(-45deg, rgb(32, 33, 33), rgb(3, 3, 3));
	}

	.active {
		color: rgb(240, 206, 173);
		border: 3rpx solid rgb(240, 206, 173);
		background-image: -webkit-linear-gradient(-45deg, rgb(69, 51, 27), rgb(20, 15, 6));
	}
}

.small {
	width: 382rpx;
	height: 100rpx;
	white-space: nowrap;
	overflow-x: auto;
	display: flex;
	margin-top: 20rpx;

	view {
		width: 100rpx;
		height: 80rpx;
		flex: 0 0 auto;
		border: 1rpx solid white;
		margin-right: 10rpx;
		border-radius: 10rpx;
		text-align: center;

		image {
			width: 80%;
			height: 80%;
			margin-top: 10rpx;
		}
	}
}

.immide {
	width: 340rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	margin-top: 17rpx;
	box-shadow: 0px 1px 5px 0px rgba(255, 255, 255, 0.4);

	image {
		width: 200rpx;
		height: 80rpx;
		margin-left: -2rpx;
	}
}

.left {
	width: 150rpx;
	height: 80rpx;
	background: rgba(18, 25, 42);
}

.item-container {
	width: 95%;
	height: 320rpx;
	background: url("../../static/manghe/0cade2c2407a4ddd17e5936099381e72.png") no-repeat;
	background-size: cover;
	box-shadow: 0px 4px 16px 0px rgba(226, 222, 204, 0.6);
	margin: 50rpx 20rpx 20rpx 20rpx;
	position: relative;
	display: flex;
	z-index: 999;

	border-top: 1rpx solid #fafafa;

	/* border: 1px solid red; */
	.left-content {
		position: relative;
		width: 300rpx;
		height: 320rpx;
		flex: 0 0 300rpx;
		/* // border-radius: 30rpx;
			// top: -20rpx; */
		margin: 0rpx 30rpx 0rpx 0rpx;
		overflow: hidden;

		.thumb {
			width: 100%;
			height: 100%;
		}

		.expired-mask {
			width: 100%;
			height: 100%;
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;

			.mask-icon {
				width: 112rpx;
				height: 84rpx;
			}
		}
	}


	.right-content {
		position: relative;
		flex-grow: 1;

		.status {
			font-size: 24rpx;
			height: 20rpx;
			// border: 1px solid red;
			overflow: hidden;
			padding-right: 20rpx;

			&.working,
			&.pending {
				background: url(@/static/activity/status-bg-working.png);
				background-size: 180rpx 70rpx;
				background-repeat: no-repeat;
				background-position-x: right;
				color: white;
			}

			&.expired {
				color: rgba(153, 153, 153, 1);
				background: url(@/static/activity/status-bg-expired.png);
				background-size: 180rpx 70rpx;
				background-repeat: no-repeat;
				background-position-x: right;
			}

			.text {
				width: 130rpx;
				text-align: center;
				display: block;
				float: right;
				line-height: 56rpx;
				font-weight: 500;
			}
		}

		.title1 {
			font-weight: bold;
			background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			line-height: 40rpx;
			font-size: 30rpx;
			min-height: 60rpx;
			padding-right: 20rpx;

			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.sub-title {
			font-size: 28rpx;
		}

		.time {
			color: #999999;
			font-size: 26rpx;
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #999999;
			font-size: 26rpx;
			padding-right: 30rpx;
			// position: absolute;
			// bottom: 30rpx;
			width: 100%;
			box-sizing: border-box;
			font-weight: 500;
			flex-wrap: wrap;

			.price-c {
				display: flex;
				align-items: flex-end;
				/* // color: red; */
				background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: 50rpx;
				/* // font-weight: 600;
					// .price {
					// 	color: red;
					// 	font-size: 38rpx;
					// }
					// .line-price {
					// 	text-decoration: line-through;
					// 	margin-left: 10rpx;
					// 	font-size: 30rpx;
					// } */
			}

			.lottery-total,
			.city,
			.live-platform {
				height: 36rpx;
				background: #FFFAE8;
				border-radius: 18rpx;
				padding: 0rpx 20rpx;
				box-sizing: border-box;
				line-height: 36rpx;
				color: white;
				font-size: 22rpx;
				font-weight: 500;
				color: #FFCC09;
				// flex: 0 0 110rpx;
				text-align: center;
			}
		}
	}

	&.theme-2 {
		overflow: hidden;
		margin: 30rpx 0rpx 20rpx 0rpx;

		.left-content {

			top: 0rpx;
			height: 100%;
			margin: 0rpx 20rpx 0rpx 0rpx;
			border-radius: 0rpx;
		}
	}

}
</style>